<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" tab-position="left" @tab-click="changeTab">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name" :label="tab.title">
        <component :is="activeTab" v-if="activeTab === tab.name" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Equipment from './env-components/Equipment'
import Basic from './env-components/Basic'
import Report from './env-components/Report'
import Sewage from './env-components/Sewage'
import Emergency from './env-components/Emergency'
import Monitor from './env-components/Monitor'
import Clean from './env-components/Clean'
import Noise from './env-components/Noise'
import WasteProduct from './env-components/WasteProduct'
import WasteWater from './env-components/WasteWater'
import WasteGas from './env-components/WasteGas'
import WasteSolid from './env-components/WasteSolid'

export default {
  name: 'EnvCard',
  components: { Equipment, Basic, Report, Sewage, Emergency, Monitor, Clean, Noise, WasteProduct, WasteWater, WasteGas, WasteSolid },
  props: {
    certNo: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      activeTab: 'basic',
      tabs: [
        { title: '企业环保基础信息', name: 'basic' },
        { title: '企业主要生产设备', name: 'equipment' },
        { title: '环评报告情况', name: 'report' },
        { title: '排污登记', name: 'sewage' },
        { title: '应急预案', name: 'emergency' },
        { title: '土壤和地下水自行监测', name: 'monitor' },
        { title: '清洁生产', name: 'clean' },
        { title: '噪声情况', name: 'noise' },
        { title: '危废生产情况', name: 'wasteProduct' },
        { title: '废水情况', name: 'wasteWater' },
        { title: '废气设备情况', name: 'wasteGas' },
        { title: '一般固废', name: 'wasteSolid' }
      ]
    }
  },
  methods: {
    changeTab(tab) {
      this.activeTab = tab.name
    }
  }
}
</script>
